<!-- 我申请的 -->
<template>
	<view class="page-apply-content">
		<view class="card" v-for="(item,index) in sourceData" :key="index">
			<view class="apply-content">
				<view class="left">
					<view class="title">服务方：{{item.title}}</view>
					<view class="desc">申请时间：{{item.desc}}</view>
					<view class="tips">{{item.tips}}</view>
				</view>
				<image class="right-icon" v-if="item.status==='0'"
					:src="require('@/static/images/will/daishencha@2x.png')"></image>
				<image class="right-icon" v-else-if="item.status==='1'"
					:src="require('@/static/images/will/beforover.png')"></image>
				<image class="right-icon" v-else :src="require('@/static/images/will/over.png')">
				</image>
			</view>
			<view class="butGroups">
				<button :class="item.status==='0'?'button primary':'button default'" :type="item.status==='0'?'primary':'default'">
					联系代书人
				</button>
				<button v-if="item.status==='1'" class="button default" type="default">
					拒绝
				</button>
				<button v-if="item.status==='1'" class="button primary" type="primary">
					确认完成
				</button>
				<navigator v-if="item.status==='2'" url="appraise" hover-class="navigator-hover">
					<button class="button primary" type="primary">
						去评价
					</button>
				</navigator>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sourceData: [{
						title: 'XXX',
						desc: '2021-11-24  9:21',
						tips: '',
						status: '0'
					},
					{
						title: 'XXX',
						desc: '2021-11-24  9:21',
						tips: '06:59:00后自动确认完成',
						status: '1'
					},
					{
						title: 'XXX',
						desc: '2021-11-24  9:21',
						tips: '06:59:00后自动确认完成',
						status: '2'
					},
					{
						title: 'XXX',
						desc: '2021-11-24  9:21',
						tips: '06:59:00后自动确认完成',
						status: '1'
					},
					{
						title: 'XXX',
						desc: '2021-11-24  9:21',
						tips: '06:59:00后自动确认完成',
						status: '0'
					},
				]
			};
		}
	}
</script>
<style lang="scss">
	uni-button[type=primary] {
		color: #fff;
		background-color: #53B3D9;
	}
	uni-button[type=default] {
		color: #53B3D9;
		background-color: #fff;
		border: 1rpx solid #53B3D9;
	}
	.page-apply-content {
		display: flex;
		flex-direction: column;
		align-content: center;
		flex-wrap: nowrap;
		align-items: center;
		justify-items: center;
		height: 100%;
		overflow-y: scroll;
		// padding-top:26rpx;
		// margin-top: 26rpx;
		.card {
			width: calc(100% - 102rpx);
			// min-height: 233rpx;
			background: #FFFFFF;
			border: 1rpx solid rgba(218, 218, 218, 0.18);
			border-radius: 20rpx;
			padding: 40rpx 30rpx;
			margin-top: 26rpx;
			
			.apply-content {
				display: flex;
				justify-content: space-between;
				justify-items: center;

				.title {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					padding-bottom: 17rpx;
				}

				.desc {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #A5A5A5;
				}

				.tips {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FF5A5A;
					padding-top: 23rpx;
				}

				.right-icon {
					width: 90rpx;
					height: 90rpx;
				}
			}

			.butGroups {
				display: flex;
				// justify-content: space-between;
				flex-wrap: nowrap;
				align-items: center;
				flex-direction: row;
				padding-top: 28rpx;
				//#ifdef MP-ALIPAY
				margin-top: 28rpx;
				//#endif
				.button {
					font-size: 24rpx;
					border-radius: 25rpx;
					font-family: PingFang SC;
					font-weight: 500;
					padding: 14rpx 30rpx;
					line-height: 24rpx;
					margin: 0;
					margin-right: 22rpx;
				}
				//#ifdef MP-ALIPAY
				.default{
					color: #53B3D9;
					background-color: #fff;
					border: 1rpx solid #53B3D9;
					height: 52rpx;
					line-height: 52rpx;
					padding: 0 30rpx;
				}
				.primary {
					color: #fff ;
					background-color: #53B3D9 ;
					border: #53B3D9;
					height: 52rpx;
					line-height: 52rpx;
					padding: 0 30rpx;
				}
				//#endif
				
			}
		}

	}
</style>
